<template>
    <div class="container">
        <div class="logo">
            <img src="../../images/logo.png" alt="">
        </div>
        <div class="form">
            <van-field 
                v-model="userInfo.phone" 
                type="text" 
                placeholder="请输入手机号"
                @blur="phoneBlur"
                left-icon="phone-o"/>
            <van-field 
                v-model="userInfo.name"
                type="text" 
                placeholder="请输入用户名"
                left-icon="friends-o"/>
            <van-field 
                v-model="userInfo.password" 
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入密码"
                :right-icon="showPassword ? 'eye' : 'closed-eye'"
                @click-right-icon="showPwd"
                left-icon="warning-o"/>
            <van-field
                v-model="userInfo.message"
                center
                clearable
                left-icon="comment-o"
                placeholder="请输入邮箱"/>
            

            <van-button  
                class="register loginBtn" 
                type="danger" 
                size="large" 
                @click="register"
                :disabled="!canRegister"
                block >注册</van-button>
            <p>已有账号，前去<span class="goLogin" @click="goLogin">登录</span></p>
            
        </div>
            <div class="aggree">
                <van-checkbox 
                    v-model="agree" 
                    checked-color="#f40"
                    icon-size="11px"/>
                <span>已阅读并同意
                    <span @click="suggestInfo">《用户注册协议》</span>
                    与
                    <span @click="suggestInfo">《隐私政策》</span>
                </span>
            </div>
    </div>
</template>

<script>
    import { registerApi } from '../../apis/loginApis'
    export default {
        data(){
            return {
                userInfo:{ //注册用户信息，双向绑定数据
                    id: '',
                    name: '', 
                    password: '', 
                    photo: '', 
                    sex: '', 
                    address: '',
                    birthday: '', 
                    phone: '', 
                    email: '', 
                    remark: ''
                },
                agree:false, //协议双向绑定数据
                showPassword:false, // 是否展示密码
            }
        },
        computed:{
            /** 
             * 注册按钮是否能用
             */
            canRegister() {
                return ( /^1[3-9]{1}[0-9]{9}$/.test(this.userInfo.phone) && this.userInfo.name != ''&& this.userInfo.password != '' && this.agree)
            }
        },
        methods:{
            /** 
             * 点击注册
             */
            async register(){
                this.userInfo.id = this.userInfo.phone
                console.log(this.userInfo);
                let result = await registerApi(this.userInfo)
                console.log(result);
                if(result.code === 200){
                    this.$toast({
                        message:'注册成功',
                        position:'middle'
                    })
                    this.$router.push({path:'/login',query: {phone:this.userInfo.phone}})
                }else{
                    this.$toast({
                        message:'手机号已存在',
                        position:'middle'
                    })
                }
            },
            //密码显示与隐藏
            showPwd(){
                this.showPassword = !this.showPassword
            },
            //点击登录回到登录页面
            goLogin(){
                this.$router.push('/login')
            },
            /**
             * 输入框失去焦点验证格式是否正确
             */
            //手机号码输入框
            phoneBlur(){
                //号码格式不正确
                if(!(/^1[3-9]{1}[0-9]{9}$/.test(this.userInfo.phone))){
                    this.$toast({
                        message:'手机号码格式不正确',
                        position:"middle"
                    })
                }
            },
            /**
             * 点击协议跳转到指定页面
             */
            suggestInfo(){
                this.$router.push('/suggest')
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../style/common.less';
    @import '../../style/login.less';
    .container{
        .loginCommon();
        .logo{
            display: block;
            position: relative;
            height: 200px;
            img{
                display: block;
                height: 100px;
                width: 100px;
                .loginCenter()
            }
        }
        .form{
            width: 90%;
            margin: auto;
            margin-top: 40px;
            .van-field{
                height: 50px;
                
            }
            .register{
                margin-top: 40px;
            }
            p{
                text-align: center;
                font-size: .8rem;
            }
        }
    }
    .goLogin{
        color: #f40;
    }
    .messageBtn{
        outline: 0;
        border: 0;
        background: transparent;
        color: rgb(99, 101, 227);
    }
    /deep/ .van-field__left-icon{
        font-size: 20px;
        margin-right: 20px;
    }
    /deep/ .van-icon{
        font-size: 20px;
    }

    //aggree
    .aggree{
        position: relative;
        display:flex;
        width: 280px;
        font-size: .6rem;
        top: 120px;
        left: calc(50% - 140px);
        padding-bottom: 30px;
        color: #808080;
        >span{
            >span{
                color: #000;
            }
        }
        /deep/ .van-icon{
            font-size: 11px;
        }
    }
    .loginBtn{
        height: 50px;
    }
</style>